<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="../spin/scripts/spin.min.js" id="spin_js"></script>
	<script type="text/javascript" src="./scripts/jquery.pagination.js" id="pagination_js"></script>
	<title></title>
	<style type="text/css">
		ul{
			list-style: none;
		}
		#data_area{
			border:1px solid green;
		}
		#Pagination_demo{
			border:1px solid red;
		}
	</style>

</head>
<body>
<ul id="data_area">
</ul>
<ul>
	<li id="Pagination_demo" class="pagination" style="visibility: hidden;">
	</li>
</ul>
<script type="text/javascript">
	$(function () {
		var demoPagination = {
			init: function (_page) {
				_page = "undefined" == typeof(_page) ? 0 : parseInt(_page) - 1;
				//显示遮挡层
				$("#data_area").loading();
				var url = "action/doAction.php";
				$.post(url, {
					action: "total"
				}, function (total) {
					$("#Pagination_demo").pagination(total, {
						current_page: _page,
						items_per_page: 10,
						show_input:true,
						is_right:true,
						callback: function (page_index) {
							var url = "action/doAction.php";
							var length = this.items_per_page;
							var dst = $("#data_area");
							dst.loading();
							$.post(url, {
										p: page_index,
										action: "pagination"
									},
									function (data) {
										if (null != data) {
											if (total >= length) {
												$("#Pagination_demo").css("visibility", "visible");
											}
											var li = "";
											$.each(data,
													function (index, entry) {
														li += "<li>" + entry.ID + "__" + entry.Name + "__" + entry.CountryCode + "__" + entry.District + "__" + entry.Population + "</li>";
													});
											dst.html("").append($(li));
										} else {
											var li = "<li>暂无信息</li>";
											dst.html("").append($(li));
										}
										//隐藏遮挡层
										dst.loading(false);
									},
									"json");
						}
					});
				});
			}
		};
		// 分页初始化
		demoPagination.init();
	});
</script>
</body>
</html>